﻿
@{
    Layout = null;
}

    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />

    <form class="layui-form" >
        <div class="layui-form-item">
            <label class="layui-form-label">工作站名称</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" id="workstationName" name="workstationName" lay-verify="required" placeholder="请输入工作站名称" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">所在车间名称</label>
            <div class="layui-input-inline">
                <select id="workshopName" name="workshopName" placeholder="请输入所在车间名称">
                    <option value="">请输入所在车间名称</option>
                    <option value="混炼车间">混炼车间</option>
                    <option value="模具成型">模具成型</option>
                    <option value="硫化车间">硫化车间</option>
                    <option value="冷却车间">冷却车间</option>
                    <option value="包装车间">包装车间</option>
                    <option value="裁切车间">裁切车间</option>
                    <option value="打孔车间">打孔车间</option>
                    <option value="喷码车间">喷码车间</option>
                    <option value="涂胶车间">涂胶车间</option>

                </select>
            </div>
            <div class="layui-btn-container">
                <button type="button" id="select" class="layui-btn layui-btn-sm layui-bg-blue" >搜索</button>
                <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置 </button>
                <button type="button" class="layui-btn layui-btn-sm layui-btn" onclick="Insert()">
                    <i class="layui-icon layui-icon-add-1"></i>新增
                </button>
                <button type="button" class="layui-btn layui-btn-warm layui-btn-sm  layui-bg-red" lay-event="delete">
                    <i class="layui-icon layui-icon-delete"></i>删除
                </button>
                <button type="button" class="layui-btn layui-btn-sm layui-bg-orange">导出</button>
            </div>
        </div>
    </form>

    <script type="text/html" id="btn">
        <button type="button" class="layui-btn layui-btn-xs layui-bg-blue" lay-event="update">
            <i class="layui-icon layui-icon-edit"></i>编辑
        </button>
        <button type="button" class="layui-btn layui-btn-xs  layui-bg-red" lay-event="delete">
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
    </script>
        <table class="layui-hide" id="WorkstationLists" lay-filter="WorkstationList"></table>

        <script src="~/libs/jquery/jquery.js"></script>
        <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
       
        <script>
            layui.use( function () {
                var table = layui.table;
                var form = layer.form;
                var laydata = layer.laydata;
                var inst = table.render({});
                // 已知数据渲染
                function select() {
                    table.render({
                        elem: '#WorkstationLists',
                        url: '/Workstation/GetWorkstationList',
                        cols: [[ //标题栏
                            { type: 'checkbox', fixed: 'left' },
                            { field: 'workstationCode', title: '工作站编号', width: 120 },
                            { field: 'workstationName', title: '工作站名称', width: 120 },
                            { field: 'workstationPlace', title: '工作站地点', width: 120 },
                            { field: 'workshopName', title: '所在车间名称', width: 120 },
                            {
                                field: 'processBelongs', title: '所属工序', width: 120},
                            {
                                field: 'state', title: '是否启用', width: 120,
                                templet: function (d) {
                                    return d.state ? "是" : "否"
                                }
                            },
                            { title: '操作', width: 160, toolbar: "#btn" }
                        ]],

                        //skin: 'line', // 表格风格
                        //even: true,
                        page: true, // 是否显示分页
                        height: 500,
                        limits: [5, 10, 20, 30],
                        limit: 10,// 每页默认显示的数量
                        where: {
                            pageIndex: 1,
                            pageSize: 10
                        },
                    })
                }

                select();

                ////查询
                $("#select").on('click', function (data) {
                    var fieId = data.fieId;// 获得表单字段
                    table.reload('WorkstationLists', {
                        page: { curr: 1 },// 重新从第 1 页开始加载数据
                        where: {
                            workstationName: $('#workstationName').val(),
                            workshopName: $('#workshopName').val()// 将表单中的字段作为搜索的条件
                        }
                    });
                    return false;// 阻止表单的默认提交行为
                });


                //删除
                // 触发单元格工具事件
                table.on('tool(WorkstationList)', function (obj) { // 双击 toolDouble
                    var data = obj.data; // 获得当前行数据
                    if (obj.event === 'delete') {
                        layer.confirm('确定要删除吗?', function (index) {
                            var arry = []
                            arry.push(data.id)
                            deleteWorkstation(arry);
                            layer.close(index) // 关闭确认框
                        })

                    }
                    if (obj.event === 'update') {
                        // 在此处输入 layer 的任意代码
                        layer.open({
                            type: 2, // page 层类型
                            area: ['500px', '500px'],
                            title: '编辑工作站',
                            shade: 0.6, // 遮罩透明度
                            shadeClose: true, // 点击遮罩区域，关闭弹层

                            content: '/Workstation/UpdateWorkstation?id=' + data.id,
                            end: function () {
                                location.reload()
                            }
                        });
                    }
                });

                // 批量删除按钮点击事件
                $('.layui-btn-warm').on('click', function () {
                    var checkStatus = table.checkStatus('WorkstationLists');
                    var data = checkStatus.data;
                    if (data.length === 0) {
                        layer.msg('请选择要删除的数据');
                        return;
                    }
                    layer.confirm('确定删除选中的 ' + data.length + ' 条数据吗？', function (index) {
                        var ids = data.map(item => item.id);
                        deleteWorkstation(ids);
                        layer.close(index);
                    });
                });
            });

          
            var deleteWorkstation = function (ids) {
                // 执行删除操作的 AJAX 请求
                $.ajax({
                    type: 'get',
                    url: '/Workstation/DeleteWorkstation',// 替换成实际的删除接口地址
                    data: {
                        ids: ids.toString()// 将删除需要的参数传递给后端，这里假设删除操作需要 id 参数
                    },
                    dataType:'json',
                    success: function (res) {
                        if (res > 0) {
                            layer.msg('删除成功')
                            location.href = '/Workstation/WorkstationList'
                        }
                        else {
                            layer.msg('删除失败')
                        }
                    }

                })
            }

            function Insert() {
                // 在此处输入 layer 的任意代码
                layer.open({
                    type: 2, // page 层类型
                    area: ['500px', '500px'],
                    title: '添加工作站',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: '/Workstation/CreateWorkstation',
                    end: function () {
                        location.reload();
                    }
                });
            }
        </script>

